<template>
	<view>
		<view class="user-info" v-if="token">
			<open-data type="userAvatarUrl" class="bgAvatar"></open-data>
			<view class="avatarWrapper">
				<open-data type="userAvatarUrl" class="avatar"></open-data>
				<open-data type="userNickName"></open-data>
			</view>
		</view>
		<view class="login" v-else>
			<button type="warn" open-type="getUserInfo" @getuserinfo="login">去登录</button>
		</view>

		<view class="order-list">
			<view @click="toOrderList" class="order-item" v-for="(item, index) in order" :key="index">
				<view :class="'iconfont '+ item.icon"></view>
				<text>{{item.label}}</text>
			</view>
		</view>

		<NavigatorBar icon="iconkefu" label="联系客服">400-188-5681</NavigatorBar>
		<navigator url="../feedback/feedback">
			<NavigatorBar icon="iconnavicon-yjjy" label="意见反馈"></NavigatorBar>
		</navigator>
		<NavigatorBar icon="iconbanben" label="当前版本">v 4.1</NavigatorBar>
	</view>
</template>

<script>
	import getToken from '../../utils/getToken.js'
	import NavigatorBar from "../../components/navigatorBar.vue";
	export default {
		data() {
			return {
				// 中间的订单菜单
				order: [{
						icon: "iconfukuan",
						label: "待付款"
					},
					{
						icon: "iconshouhuo",
						label: "待收货"
					},
					{
						icon: "icontuihuo",
						label: "退货/退款"
					},
					{
						icon: "icondingdanyichenggong",
						label: "全部订单"
					},
				],
				token: ''
			}
		},
		components: {
			NavigatorBar
		},
		onLoad() {
			const token = uni.getStorageSync('token')
			if (token) {
				this.token = token
			}
		},
		methods: {
			login(e) {
				uni.showLoading({
					title: "登录中",
					mask: true
				})
				getToken(e).then(token => {
					uni.setStorageSync('token', token)
					this.token = token
					uni.hideLoading()
				})

			},
			toOrderList() {
				if (this.token) {
					uni.navigateTo({
						url: '../order_list/order_list'
					})
				} else {
					wx.showToast({
						title: '请先登录',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.user-info {
		position: relative;
		width: 750rpx;
		height: 329rpx;

		.bgAvatar {
			width: 750rpx;
			height: 329rpx;
			filter: blur(10px);
		}

		.avatarWrapper {
			position: absolute;
			color: #fff;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -70%);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}
	}

	.login {
		width: 750rpx;
		height: 329rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.order-list {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		border-bottom: 10px #eee solid;

		.order-item {
			text-align: center;
			font-size: 12px;

			.iconfont {
				font-size: 24px;
			}

			&:active {
				color: red;
			}
		}
	}
</style>
